<script setup lang="ts">
import { useRoute } from 'vue-router';
const route = useRoute();
</script>

<template>
  <div class="privacy-page">
    <!-- 头部导航 -->
    <div class="wrapper-content header-nav">
      <div class="header-left">
        <span class="logo" @click="$router.push('/index')">FileQX</span>
      </div>
      <div class="header-right">
        <ul class="nav-list">
          <!-- <router-link to="/contactUs">
            <li class="nav-item first-item">联系我们</li>
          </router-link> -->
          <router-link to="/login">
            <li class="nav-item">登入</li>
          </router-link>
          <router-link to="/register">
            <li class="nav-item last-item">报名</li>
          </router-link>
        </ul>
        <ul class="login-list">
          <router-link to="/login">
            <li class="nav-item">登入</li>
          </router-link>
        </ul>
      </div>
    </div>
    <!-- 主体内容 -->
    <div
      class="wrapper-content page-wrapper small"
      v-if="route.params.id == '1'"
    >
      <div class="page-title left headline">
        <h1 class="title">Terms of Service</h1>
      </div>
      <div class="page-content">
        <p>
          Laoreet cum hendrerit iaculis arcu phasellus congue et elementum,
          pharetra risus imperdiet aptent posuere rutrum parturient blandit,
          dapibus tellus ridiculus potenti aliquam sociis turpis. Nullam commodo
          eget laoreet risus cursus vel placerat, in dapibus sociis gravida
          faucibus sodales, fringilla potenti elit semper iaculis ullamcorper.
          Dignissim vulputate pretium montes pellentesque mollis, consectetur
          adipiscing curabitur semper sem rhoncus, litora viverra curae proin.
        </p>
      </div>
    </div>
    <div
      class="wrapper-content page-wrapper small"
      v-if="route.params.id == '2'"
    >
      <div class="page-title left headline">
        <h1 class="title">Privacy Policy</h1>
      </div>
      <div class="page-content">
        <p>
          Sit orci justo augue maecenas laoreet consectetur natoque magnis in
          viverra sagittis, himenaeos urna facilisis mus proin primis diam
          accumsan tristique inceptos. Primis quisque posuere sit praesent
          lobortis feugiat semper convallis facilisis, vivamus gravida ligula
          nostra curae eu donec duis parturient senectus, arcu dolor viverra
          penatibus natoque cum nisi commodo. Litora sociis mauris justo nullam
          suspendisse mattis maecenas nascetur congue phasellus cras ultricies
          posuere donec, dapibus egestas diam lacus ornare montes senectus
          tincidunt eu taciti sed consequat.
        </p>
      </div>
    </div>
    <div
      class="wrapper-content page-wrapper small"
      v-if="route.params.id == '3'"
    >
      <div class="page-title left headline">
        <h1 class="title">Cookie Policy</h1>
      </div>
      <div class="page-content">
        <p>
          Metus penatibus ligula dolor natoque non habitasse laoreet facilisis,
          libero vivamus eget semper vulputate interdum integer, phasellus lorem
          enim blandit consectetur nullam sollicitudin. Hendrerit interdum
          luctus ut in molestie himenaeos eros cum laoreet parturient est, eu
          lectus hac et netus viverra dictumst congue elit sem senectus litora,
          fames scelerisque adipiscing inceptos fringilla montes sociosqu
          suscipit auctor potenti. Elementum lacus vulputate viverra ac morbi
          ligula ipsum facilisi, sit eu imperdiet lacinia congue dis vitae.
        </p>
      </div>
    </div>
    <!-- 底部 -->
    <div class="wrapper-content footer-nav">
      <div class="logo">
        <b class="logo-text">web.okpan.com</b>
      </div>
      <!-- <ul class="navigation-links">
        <li>
          <router-link to="/contactUs" class="hover-text-theme"
            >联系我们</router-link
          >
        </li>
      </ul> -->
      <ul class="navigation-links">
        <li>
          <router-link to="/privacyPolicy/1" class="hover-text-theme"
            >Terms of Service</router-link
          >
        </li>
        <li>
          <router-link to="/privacyPolicy/2" class="hover-text-theme"
            >Privacy Policy</router-link
          >
        </li>
        <li>
          <router-link to="/privacyPolicy/3" class="hover-text-theme"
            >Cookie Policy</router-link
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import './privacyPolicy.scss';
</style>
